import { useEffect, useState, useRef } from 'react';
import './index.scss';
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from 'react-redux';
// 检查路径是否正确，推测可能是文件名拼写错误，正确文件名可能是 questionnaire
import { setQuestionare, setAnswersId, setStandAnswer } from '../../store/modules/questionare';
// import type { RootState } from '../../store';
import type { Ques, Answer } from '../../store';


function Question() {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const [ques, setQues] = useState<Ques[]>([])
    const [num, setNum] = useState<any>(1)
    const [isSelected, setIsSelected] = useState<Boolean>(false)
    const [selectedAnswer, setSelectedAnswer] = useState<Answer>()


    function toNext() {
        setIsSelected(false);
        if (!isSelected) {
            alert("请选择答案");
            return;
        }
        if (selectedAnswer) {
            dispatch(setAnswersId(selectedAnswer.topic_answer_id))
        }
        setNum(num + 1)
        if (num === ques.length) {
            navigate('/result')
        }
    }

    function selectAnswer(item: Answer) {
        // console.log(e.topic_answer_id);
        // 将用户选择的答案id存起来
        setSelectedAnswer(item)
        setIsSelected(true)
    }

    const getData = async () => {
        fetch('https://mock.mengxuegu.com/mock/6863523233517567f26be02d/example/jsQuestion', {
            method: 'GET',
        }).then((res) => {
            // console.log(res);
            return res.json()
        }).then((data) => {
            console.log(data.questions);
            dispatch(setQuestionare(data.questions))
            dispatch(setStandAnswer(data.questions))
            setQues(data.questions)
        })
    }

    // const { questions } = useSelector((state: RootState) => state.questionare)
    // 组件初次加载时执行的逻辑
    useEffect(() => {
        // console.log(ques);
        getData()
        // 这里可以添加获取问卷数据的逻辑，比如从服务器获取问卷数据并存储到 Redux 中。
    }, [])

    return (
        <div className="question-container">
            <div className="question-container-hd">
                <div className="question-container-hd-title">第 {num}/{ques.length} 题</div>
                <div className="question-container-hd-progress">
                    <div className="question-container-hd-progress-bar" style={{ width: `${num / ques.length * 100}%` }}></div>
                </div>
            </div>
            <div className="question-container-bd">
                <div className="question-container-bd-option">
                    <div className="question-container-bd-option-card">
                        <div className="order">Q{num}</div>
                        <div className="title">{ques[num - 1]?.topic_name}</div>
                        <ul className="list">
                            {ques[num - 1]?.topic_answer?.map((item: Answer) => {
                                return (
                                    <li key={item.topic_answer_id}>
                                        <input type="radio" name='item' id={`item${item.topic_answer_id}`} onChange={() => { selectAnswer(item) }} />
                                        <label htmlFor={`item${item.topic_answer_id}`}>{item.answer_name}</label>
                                    </li>
                                )
                            })}
                        </ul>
                    </div>
                </div>
            </div>
            <div className="question-container-ft">
                <div className="question-container-ft-btn" onClick={toNext}>
                    {/* <button>上一题</button> */}
                    {num === ques.length ? '提交' : '下一题'}
                </div>
            </div>
        </div>
    )
}
export default Question;